<!-- <template>
  <el-upload ref="upload" class="upload-demo" accept=".xls,.xlsx" action="#" :limit="1" :show-file-list='false'
    :on-exceed="handleExceed" :before-upload='gobeforeUpload' :http-request='GOhttpRequest' :auto-upload="true">
    <template #trigger>
      <el-button type="primary">上传文件</el-button>
    </template>

    <template #tip>
      <div class="el-upload__tip text-red">
        limit 1 file, new file will cover the old file
      </div>
    </template>
  </el-upload>
  <div>
    <el-input v-model="eleTitel" style="width: 200px;" placeholder="纠纷警情趋势" clearable />
    <el-input v-model="elename" style="width: 200px;" placeholder="警情波动量" clearable />
    <el-input v-model="MeasureWord" style="width: 200px;" placeholder="个" clearable />
    <el-input v-model="elenum" style="width: 200px;" placeholder="2" clearable />
    <el-input v-model="elenum1" style="width: 200px;" placeholder="4 by" clearable />
    <el-input v-model="elenum2" style="width: 200px;" placeholder="8 by" clearable />
    <el-input v-model="elenum3" style="width: 200px;" placeholder="12 by" clearable />
  
  
  </div>
  <div class="center">
    <div class="echarts" ref="echarts1"></div>
  </div>
  
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { ref, onMounted } from "vue";
import { genFileId } from 'element-plus'
import type { UploadInstance, UploadRequestOptions, UploadProps, UploadRawFile } from 'element-plus'

const upload = ref<UploadInstance>()

const handleExceed: UploadProps['onExceed'] = (files) => {
  upload.value!.clearFiles()
  const file = files[0] as UploadRawFile
  file.uid = genFileId()
  upload.value!.handleStart(file)
}
const gobeforeUpload: UploadProps['beforeUpload'] = (files) => {

  console.log(files.name)
  return true
}

const GOhttpRequest = (files: UploadRequestOptions): any => {
  console.log(files.file)
  readExcel(files.file)
  upload.value!.clearFiles()
  return true
}

import * as XLSX from "xlsx";
const xlsxfrom = ref({})
const xlsxheader = ref<string[]>([])
const Cgireturn = ref<any[]>([
  ['第1周', 1942, 1877, 1877, 1877],
  ['第2周', 1877, 1838, 1838, 1838],
  ['第3周', 1838, 1660, 1660, 1660],
  ['第4周', 1660, 1768, 1768, 1768],
  ['第5周', 1768, 1826, 1826, 1826],
  ['第6周', 1826, 2150, 2150, 2150],
  ['第7周', 2150, 2314, 2314, 2314],
  ['第8周', 2314, 2488, 2488, 2488],
  ['9', 2488, 2433, 2433, 2433],
  ['10', 2433, 2369, 2369, 2369],
  ['11', 2369, 2203, 2203, 2203],
  ['12', 2203, 2551, 2551, 2551],
  ['13', 2551, 2436, 2436, 2436],
  ['14', 2436, 2146, 2146, 2146],
  ['15', 2146, 2507, 2507, 2507],
  ['16', 2507, 2373, 2373, 2373],
  ['17', 2373, 2382, 2382, 2382],
  ['第43周', 2382, 2530, 2530, 2530],
  ['第44周', 2530, 2409, 2409, 2409],
  ['第45周', 2409, 2410, 2410, 2410],
  ['第46周', 2410, 2346, 2346, 2346],
  ['第47周', 2346, 1995, 1995, 1995],
  ['第48周', 1995, 2505, 2505, 2505],
  ['第49周', 2505, 2246, 2246, 2246],
  ['第50周', 2246, 2408, 2408, 2408],
  ['第26周', 2408, 1877, 1877, 1877],
  ['第27周', 1877, 1838, 1838, 1838],
  ['第28周', 1838, 1660, 1660, 1660],
  ['第29周', 1660, 1768, 1768, 1768],
  ['第30周', 1768, 1826, 1826, 1826],
  ['第31周', 1826, 2150, 2150, 2150],
  ['第32周', 2150, 2314, 2314, 2314],
  ['第33周', 2314, 2488, 2488, 2488],
  ['第34周', 2488, 2433, 2433, 2433],
  ['第35周', 2433, 2369, 2369, 2369],
  ['第36周', 2369, 2203, 2203, 2203],
  ['第37周', 2203, 2551, 2551, 2551],
  ['第38周', 2551, 2436, 2436, 2436],
  ['第39周', 2436, 2146, 2146, 2146],
  ['第40周', 2146, 2507, 2507, 2507],
  ['第41周', 2507, 2373, 2373, 2373],
  ['第42周', 2373, 2382, 2382, 2382],
  ['第43周', 2382, 2530, 2530, 2530],
  ['第44周', 2530, 2409, 2409, 2409],
  ['第45周', 2409, 2410, 2410, 2410],
  ['第46周', 2410, 2346, 2346, 2346],
  ['第47周', 2346, 1995, 1995, 1995],
  ['第48周', 1995, 2505, 2505, 2505],
  ['第49周', 2505, 2246, 2246, 2246],
  ['第50周', 2246, 2408, 2408, 2408],])
//前端解析表格
const readExcel = (e: any) => {
  // 读取表格文件
  // let that = this;

  const files = e;
  if (files.length <= 0) {
    return false;
  } else if (!/\.(xls|xlsx)$/.test(files.name.toLowerCase())) {

    // this.$Message.warning('上传格式不正确，请上传xls或者xlsx格式');
    return false;
  } else {
    // 更新获取文件名
    // that.upload_file = files[0].name;
  }
  // console.log(files,'files')

  const fileReader = new FileReader();
  fileReader.onload = ev => {
    try {
      const data = ev.target!.result;
      // console.log( 'data',data)
      const workbook = XLSX.read(data, {
        type: "binary", cellDates: true
      });
      const wsname = workbook.SheetNames[0]; //取第一张表
      console.log(workbook.Sheets[wsname], 'wsname')
      const header: string[] = getHeaderRow(workbook.Sheets[wsname]);
      console.log("读取的excel表头数据（第一行）", header);
      xlsxheader.value = header
      if (JSON.stringify(header)) {
        const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]);
        console.log(ws, 'ws')
        xlsxfrom.value = ws
        assemblyData(ws)
      } else {
        // that.$Message.error('导入表格和初始模板不同,请下载模板重新导入');
        // that.clearImport()
      }
    } catch (e) {
      console.log(e, 'error')
      return false;

    }
  };
  fileReader.readAsBinaryString(files);
}
//获取表头数据
const getHeaderRow = (sheet: any) => {
  const headers = []; // 定义数组，用于存放解析好的数据
  const range = XLSX.utils.decode_range(sheet["!ref"]); // 读取sheet的单元格数据
  let C;
  const R = range.s.r;
  /* start in the first row */
  for (C = range.s.c; C <= range.e.c; ++C) {
    /* walk every column in the range */
    const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })];
    /* find the cell in the first row */
    let hdr = "UNKNOWN " + C; // <-- replace with your desired default
    if (cell && cell.t) hdr = XLSX.utils.format_cell(cell);
    headers.push(hdr);
  }
  return headers; // 经过上方一波操作遍历，得到最终的第一行头数据
}

//解析表格数据
const assemblyData = (value: any) => {
  console.log(xlsxheader.value)
  let name = xlsxheader.value[0]
  let value1 = xlsxheader.value[1]
  console.log(name, value1)
  let gireturn = [

  ]
  //新增功能
  for (let i = 0; i < value.length; i++) {
    let text = []
    if (i == 0) {
      text.push(value[i][name])
      let num = Number(value[i][value1])
      text.push(Number(num - 1))
      text.push(num)
      text.push(num)
      text.push(num)
    } else {
      text.push(value[i][name])
      let num = Number(value[i][value1])
      let oldnum = Number(value[i - 1][value1])
      text.push(oldnum)
      text.push(num)
      text.push(num)
      text.push(num)
    }
    gireturn.push(text)
  }
  //    console.log()
  Cgireturn.value = gireturn
  getList(echarts1);
}

const echarts1 = ref<any>(null);
type EChartsOption = echarts.EChartsOption;
let option: EChartsOption;
//右上代码
const getList = (ele: any) => {
  let myChart = echarts.init(ele.value, 'dark');
  let textt = eleTitel.value
  const data0 = splitData(Cgireturn.value);
  function splitData(rawData: any) {
    const categoryData = [];
    const values = [];
    for (var i = 0; i < rawData.length; i++) {
      categoryData.push(rawData[i].splice(0, 1)[0]);
      values.push(rawData[i]);
    }
    return {
      categoryData: categoryData,
      values: values
    };
  }
  function calculateMA(dayCount: any) {
    var result = [];
    // console.log(data0.values)
    for (var i = 0, len = data0.values.length; i < len; i++) {

      if (i < dayCount) {
        let nums = 0;
        for (var K = 0; K <= i; K++) {

          nums += +data0.values[K][1];
          // debugger
        }

        result.push(nums / Number(i + 1));
        continue;
      }

      var sum = 0;
      for (var j = 0; j < dayCount; j++) {
        sum += +data0.values[i - j][1];
      }
      result.push(sum / dayCount);
    }
    // console.log(result)
    return result;
  }
  option = {
    backgroundColor: '',
    title: {
      text: textt,
      left: 0
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      },
      // 修改 formatter 函数签名以符合 TooltipFormatterCallback<TopLevelFormatterParams> 类型
      formatter: function (params) {
        // 确保 params 是数组
        if (!Array.isArray(params)) {
          return '';
        }
        
        var result = params[0]?.name + '警情状况：' + '<br/>';

        params.forEach((item) => {
             item.value 

          // 确保 item 存在并且有 value 属性
          if (!item || !item.value) {
            return;
          }
          
          if (
            '警情' === item.seriesName &&
            item.value[1] &&
            typeof item.value[1] === 'number'
          ) {
            result += '警情数：' + item.value[1].toFixed(0) + '<br/>';
          } else if (
            typeof item.value === 'number' &&
            !['open', 'close', 'lowest', 'highest'].includes(item.seriesName)
          ) {
            result += item.seriesName + '：' + item.value.toFixed(0) + '<br/>';
          }
        });
        result += '周环比：' + 9.22 + '%<br/>';
        result += '年同比：' + 6 + '%<br/>';
        return result;
      }
    },

    //   tooltip: {
    //   trigger: 'axis',
    //   axisPointer: {
    //     animation: false,
    //     type: 'cross',
    //     lineStyle: {
    //       color: '#376df4',
    //       width: 2,
    //       opacity: 1
    //     }
    //   }
    // },
    legend: {
      // show: false,
      // data: ['警情趋势', '环比']
    },
    grid: {
      left: '10%',
      right: '10%',
      bottom: '15%'
    },
    xAxis: {
      type: 'category',
      data: data0.categoryData,
      boundaryGap: false,
      axisLine: { onZero: false },
      splitLine: { show: false },
      min: 'dataMin',
      max: 'dataMax'
    },
    yAxis: {
      scale: true,
      splitArea: {
        show: true
      }
    },
    dataZoom: [
      {
        type: 'inside',
        start: 50,
        end: 100
      },
      {
        show: true,
        type: 'slider',
        top: '90%',
        start: 50,
        end: 100
      }
    ],
    series: [
      {
        name: elename.value,
        type: 'candlestick',
        data: data0.values,
        label: {
          show: true,
          position: 'top',
          formatter: function (param) {
            console.log(123, param);
            return param.value?.toString();
          }
        },
        itemStyle: {
          color: '#ec0000',
          color0: '#00da3c'
        }
      },
      {
        name: `${elenum.value}${MeasureWord.value}趋势`,
        type: 'line',
        data: calculateMA(elenum.value),
        smooth: true,
        lineStyle: {
          opacity: 0.5
        }
      },
      {
        name: `${elenum1.value}${MeasureWord.value}趋势`,
        type: 'line',
        data: calculateMA(elenum1.value),
        smooth: true,
        lineStyle: {
          opacity: 0.5
        }
      },
      {
        name: `${elenum2.value}${MeasureWord.value}趋势`,
        type: 'line',
        data: calculateMA(elenum2.value),
        smooth: true,
        lineStyle: {
          opacity: 0.5
        }
      },
      {
        name: `${elenum3.value}${MeasureWord.value}趋势`,
        type: 'line',
        data: calculateMA(elenum3.value),
        smooth: true,
        lineStyle: {
          opacity: 0.5
        }
      }
    ]
  };

  option && myChart.setOption(option);
}
let eleTitel = ref<string>('纠纷警情趋势')
let elename = ref<string>('警情波动量')


let MeasureWord = ref<string>('个')
let elenum  = ref(2)
let elenum1  = ref(4)
let elenum2  = ref(8)
let elenum3  = ref(12)
onMounted(() => {
  getList(echarts1);


});
</script>
<style scoped lang="scss">
.common-layout {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background-color: #fff;
  overflow: hidden;

  .text {
    text-align: center;
  }

  .center {
    width: 100%;
    height: 95%;

    background-color: #5489b8;

    .echarts {
      width: 1200px;
      height: 400px;
      background-color: #19466d;
    }

  }

}
</style> -->